<style src="@/css/components/table.css"></style>
<style src="@/css/components/el-dialog.css"></style>
<style src="@/css/components/button.css"></style>
<style>
    .popup-table .table-set {
        display: flex;
        justify-content: space-between;
        padding-bottom:24px;
    }

    .popup-table .table-set .el-select {
        width:120px;
        height:40px;
        border-radius:2px;
    }

    .popup-table .table-set .el-input {
        width:160px;
        height:40px;
        border-radius:2px;
        justify-content: space-between;
    }
    .table-cont .popup-el-table.el-table td, .table-cont .popup-el-table.el-table th{
        height: 43px;
    }

    .popup-footer {
        margin-top:20px;
        display: flex;
        justify-content: space-between;
    }

    .popup-footer .el-pager li  {
        min-width:24px;
    }

    .popup-footer .el-pagination .btn-prev {
        min-width:24px;
        padding-right:6px;
    }

    .popup-footer .el-pagination .btn-next {
        min-width:24px;
        padding-left:6px;
    }

    .popup-table .el-table .checkbox {
        display: inline-block;
        position: relative;
        border: 1px solid #dcdfe6;
        border-radius: 2px;
        box-sizing: border-box;
        width: 14px;
        height: 14px;
        background-color: #fff;
        z-index: 1;
        transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
        margin:0 14px 0 14px;
    }

    .popup-table .el-table .checkbox:after {
        box-sizing: content-box;
        content: "";
        border: 1px solid #fff;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(0);
        width: 3px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
    }

    .popup-table .el-table .checkbox:hover {
        border-color: #409eff;
    }

    .popup-table .el-table input:checked + .checkbox{
        background-color: #409eff;
        border-color: #409eff;
    }


    .popup-table .el-table input:checked + .checkbox:after{
        transform: rotate(45deg) scaleY(1);
    }
</style>

<template>
    <el-dialog  :visible.sync="dialogFormVisible" width="700px" class="new-dialog" :class="selectClass">
        <div slot="title" v-html="title"></div>

        <div class="table popup-table">
            <div class="table-set">
                <span></span>
                <!-- <el-select v-model="value" placeholder="请选择" v-show="selectList.length > 0">
                    <el-option
                      v-for="item in selectList"
                      :key="item[selectDefault.value]"
                      :label="item[selectDefault.label]"
                      :value="item[selectDefault.value]">
                    </el-option>
                </el-select> -->
                <div v-show="selectList.length <= 0"></div>
                    <el-input
                        :placeholder="searchPlaceholder"
                        suffix-icon="el-icon-search"
                        v-model="search">
                    </el-input>
                </div>

            <div class="table-cont">

                <el-table ref="selectTable" class="el-table newTab popup-el-table el-table--fit el-table--

enable-row-hover el-table--enable-row-transition" :data="list"  style="width: 100%"  @select="raidoFn"

@select-all="checkAllFn">
                    <el-table-column type="selection" width="55"></el-table-column>

                    <el-table-column :prop="items.key" :label="items.name" v-for="(items, indexs) in

listDefault" :key="indexs" v-if="items.name != 'selection'" ></el-table-column>
                </el-table>
            </div>
        </div>
        <div slot="footer"  class="popup-footer">
            <div class="page" v-if="total>0">
                <el-pagination
                    layout="prev, pager, next"
                    @current-change="handleCurrentChange"
                    :page-size="pageSize"
                    :total="totalNum">
                </el-pagination>
            </div>
            <div class="btnCont">
                <el-button type="text no-border" @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary"  class="showdow" @click="configBtn(true)">确 定</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script>
    import qs from 'qs'

    export default {
        props:{
            // 回传当前的id
            recordListIdS:{
                type:"Array",
            },
            // 自定义class
            selectClass:{
                type:"string"
            },

            // 记录的id名
            name: {
                type:"string",
                required:true
            },

            type: {
                type:"string",
                required:true
            },

            // 状态
            dialogFormVisible: {
                type:Boolean,
                required:true
            },

            title: {
                type:"string",
                default:"提示"
            },

            // 下拉列表
            selectList: {
                type:"Array",
                default:[]
            },

            //下拉列表参数
            selectDefault: {
                type:"Object"
            },

            // 查询参数
            searchPlaceholder: {
                type: "string",
                default: "请输入搜索内容"
            },

            // 表单数据
            list: {
                type:"Array",
                required:true
            },

            // 表单对应参数
            listDefault: {
                type:"Array",
                required:true
            },

            // 总页数
            total: {
                type:"number"
            },

            pageSize:{
                type:"number",
                default:4
            },

            page:{
                default: "1"
            }
        },

        data() {
            return {
                search:"", //查询的值
                value:"", //选中的值
                curSelectVal:[], //当前选中的列表
                oldSelectVal:[], //已选中的列表
                totalSelectVal:[],
                all:""
            }
        },

        watch:{
            title(value) {
                this.title = value
            },

            value(value) {
                this.$emit('setSelect', value, this.type)
            },

            list(value) {
                this.list = value
                this.checkoutUser()

            },

            search(value) {
                this.$emit('setSearch', value, this.type)
            },


            dialogFormVisible(value) {
                if(!value) {
                    
                    this.$emit('setSelectTable', false)
                } 
            },

            recordListIdS(value) {
                let param = {
                        examIDs:value.join(','),
                        infoType: this.type == 'testPaper' ? 1 : 2
                    }


                this.getLibListByExamIDs(param).then((value)=>{
                    this.totalSelectVal = value
                })
            },

            totalSelectVal(value) {
                this.$emit('setTotalSelect', value.length, this.type)
            },

            total(value) {
                this.total = value
            }
        },

        computed:{
            totalNum(){
                return this.total
            }
        },

        methods:{

            checkAllFn(value) {
                if( value.length > 0) {
                    value.forEach((item)=>{
                        this.saveRadioData(item, 1)
                    })
                } else {
                    this.list.forEach((item)=>{
                        this.saveRadioData(item)
                    })
                }

            },

            raidoFn(all, row) {
                this.saveRadioData(row)
            },


            saveRadioData(row, type) {

                let index = this.totalSelectVal.findIndex( item => item[this.name] === row[this.name])

                if( index !== -1) {
                    !type && this.totalSelectVal.splice(index, 1)
                } else {
                    this.totalSelectVal.push(row)
                }
            },

            // 确定操作
            configBtn(state) {
                let iarr = this.totalSelectVal.map(item=>item.ExamLibID)

                let param = {
                    list: iarr,
                    name: this.type
                }

                this.$emit('setSelectTable', false, param, state)

                this.handleNodeClick()
            },

            // 获取试卷（问)信息(根据id)
            getLibListByExamIDs(param) {
                return new Promise((resolve, reject)=>{
                    axios.post('/com/exam/getLibListByExamIDs', qs.stringify(param)).then((res) => {
                        var d = res.data
                        if(d.flag == 1){
                            resolve(d.data.Rows)
                        }else {
                            this.$message.error(d.msg)
                        }
                    })
                })
            },

            // 分页
            handleCurrentChange(value) {
                this.$emit('setPage', value, this.type)
                this.handleNodeClick()
            },

            // 切换分页数据刷新
            handleNodeClick(){
                this.search = ''
            },

            //勾选已选择的列表
            checkoutUser() {

                if(this.totalSelectVal.length <= 0 ) return ;

                this.$nextTick(() => {
                    this.totalSelectVal.forEach((item) => {
                        const temp = this.list.find((it) => it[this.name] === item[this.name])
                        if (temp) {
                            this.$refs.selectTable.toggleRowSelection(temp)
                        }
                    })
                })

            },




        },

        mounted() {
            this.search = ''
            this.oldSelectVal = []
            this.curSelectVal = []
        }
    }
</script>
